<template>
  <el-dialog
    title="工单详情"
    :visible="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <div class="box">
      <div class="title">
        <i :class="`el-icon-${icon}`" :style="{ color: color }"></i>
        <span>{{ span }}</span>
      </div>
      <div class="pic">
        <img :src="img" alt="" />
      </div>
    </div>
    <el-descriptions :column="2">
      <el-descriptions-item label="设备编号">{{
        info.innerCode
      }}</el-descriptions-item>
      <el-descriptions-item label="创建日期">{{
        info.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="取消日期">{{
        info.updateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="运营人员">{{
        info.userName
      }}</el-descriptions-item>
      <el-descriptions-item label="工单类型">{{
        info?.taskType?.typeName
      }}</el-descriptions-item>
      <el-descriptions-item label="补货数量"
        ><a>补货详情</a>
      </el-descriptions-item>
      <el-descriptions-item label="工单方式">{{
        createType
      }}</el-descriptions-item>
      <el-descriptions-item label="取消原因"> 无 </el-descriptions-item>
    </el-descriptions>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DikedePcArticleDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: true,
    },
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      icon: "",
      img: "",
      span: "",
      color: "",
    };
  },

  watch: {
    dialogVisible(value) {
      if (value) {
        this.title();
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    title() {
      if (this.info.taskStatusTypeEntity) {
        if (this.info.taskStatusTypeEntity.statusName === "待办") {
          this.icon = "time";
          this.span = "待办";
          this.img = "https://likede2-admin.itheima.net/img/pic_1.834b274c.png";
          this.color = "#ff665f";
        } else if (this.info.taskStatusTypeEntity.statusName === "取消") {
          this.icon = "info";
          this.span = "取消";
          this.img = "https://likede2-admin.itheima.net/img/pic_3.e8208e34.png";
          this.color = "#393939";
        } else if (this.info.taskStatusTypeEntity.statusName === "完成") {
          this.icon = "success";
          this.span = "完成";
          this.img = "	https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png";
          this.color = "#79e192";
        }
      }
    },
  },

  computed: {
    createType() {
      if (this.info.createType === 1) {
        return "手动";
      } else if (this.info.createType === 0) {
        return "自动";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::deep .el-dialog__body {
  margin-top: 30px;
}
::deep .el-descriptions {
  padding-left: 50px;
}
::deep .el-descriptions-item__container {
  margin-bottom: 8px;
}
.el-pagination {
  text-align: center;
  margin-top: 25px;
}
.box {
  margin: 0 auto 20px;
  width: 620px;
  height: 54px;
  padding-left: 30px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    ::v-deep i {
      font-size: 26px;
      flex-direction: column;
      // color: lawngreen;
      margin-right: 10px;
    }
    span {
      font-size: 20px;
    }
  }
  .pic {
    margin-right: 76px;
    margin-bottom: 7px;
  }
}
</style>
